<template>
  <a-modal title="总计详情" :visible="visible" :width="1400" @cancel="closeModal" :bodyStyle="{ maxHeight: '72vh',overflow: 'auto' }">
    <template slot="footer">
      <a-button @click="closeModal">关闭</a-button>
    </template>
    <div style="text-align: right">
      <a-button type="primary" @click="handleExportXls">导出</a-button>
    </div>
    <a-tabs v-model="activeKey" @change="callback">
      <a-tab-pane key="depart" tab="按部门查看">
        <a-table 
          ref="table" 
          bordered 
          size="middle" 
          rowKey="departId" 
          :columns="departColumns"
          :dataSource="departSource" 
          :pagination="pagination" 
          :expandedRowKeys="expandedRowKeys"
          @expand="handleExpand"
          @change="tableChange"
        >
          <span slot="startCount" slot-scope="text, record">
            <a @click="onProcess(record)">{{ text }}</a>
          </span>
          <a-table
            slot="expandedRowRender"
            :columns="childColumns_1"
            :dataSource="innerDepartData"
            :pagination="false"
          >
            <span slot="startCount" slot-scope="text, record">
              <a @click="onProcess(record)">{{ text }}</a>
            </span>
            <span slot="processName" slot-scope="text, record">
              <a-icon type="plus" @click="viewProcessName(record)" style="color: #1890ff;margin-right: 4px;"/>{{ text }}
            </span>
          </a-table>
        </a-table>
      </a-tab-pane>
      <a-tab-pane key="user" tab="按人员查看">
        <a-table 
          ref="table" 
          bordered 
          size="middle"
          rowKey="key" 
          :columns="userColumns"
          :dataSource="userSource" 
          :pagination="pagination" 
          :expandedRowKeys="expandedRowKeys"
          @expand="handleExpand"
          @change="tableChange"
        >
          <span slot="startNum" slot-scope="text, record">
            <a @click="onProcess(record)">{{ text }}</a>
          </span>
          <a-table
            slot="expandedRowRender"
            :columns="childColumns_2"
            :dataSource="innerUserData"
            :pagination="false"
          >
            <span slot="startNum" slot-scope="text, record">
              <a @click="onProcess(record)">{{ text }}</a>
            </span>
            <span slot="processName" slot-scope="text, record">
              <a-icon type="plus" @click="viewProcessName(record)" style="color: #1890ff;margin-right: 4px;"/>{{ text }}
            </span>
          </a-table>
        </a-table>
      </a-tab-pane>
    </a-tabs>
    <processTaskModal ref="processTaskModal"></processTaskModal>
    <approvalTimeModal ref="approvalTimeModal"></approvalTimeModal>
  </a-modal>
</template>

<script>
import processTaskModal from './processTaskModal.vue'
import approvalTimeModal from '../component/approvalTimeModal.vue'
import { getAction } from '@/api/manage';
import { downFile } from '@/api/manage'
import moment from 'dayjs'
const departColumns = [
  {
    title: '部门名称',
    dataIndex: 'departName',
    align: 'center',
    width: '25%'
  },
  {
    title: '发起流程数',
    dataIndex: 'startCount',
    scopedSlots: {customRender: 'startCount'},
    align: 'center',
    width: '25%'
  },
  {
    title: '未结束流程数',
    dataIndex: 'inProcessCount',
    align: 'center',
    width: '25%'
  },
  {
    title: '结束流程数',
    dataIndex: 'finishedCount',
    align: 'center',
    width: '25%'
  },
];
const userColumns = [
  {
    title: '人员名称',
    dataIndex: 'realname',
    align: 'center',
    width: '25%'
  },
  {
    title: '发起流程数',
    dataIndex: 'startNum',
    scopedSlots: {customRender: 'startNum'},
    align: 'center',
    width: '25%'
  },
  {
    title: '未结束流程数',
    dataIndex: 'midNum',
    align: 'center',
    width: '25%'
  },
  {
    title: '结束流程数',
    dataIndex: 'endNum',
    align: 'center',
    width: '25%'
  },
];
const childColumns_1 = [
  {
    title: '流程名称',
    dataIndex: 'processName',
    scopedSlots: {customRender: 'processName'},
    align: 'center',
    width: '25%'
  },
  {
    title: '发起流程数',
    dataIndex: 'startCount',
    scopedSlots: {customRender: 'startCount'},
    align: 'center',
    width: '25%'
  },
  {
    title: '未结束流程数',
    dataIndex: 'inProcessCount',
    align: 'center',
    width: '25%'
  },
  {
    title: '结束流程数',
    dataIndex: 'finishedCount',
    align: 'center',
    width: '25%'
  },
];
const childColumns_2 = [
  {
    title: '流程名称',
    dataIndex: 'processName',
    scopedSlots: {customRender: 'processName'},
    align: 'center',
    width: '25%'
  },
  {
    title: '发起流程数',
    dataIndex: 'startNum',
    scopedSlots: {customRender: 'startNum'},
    align: 'center',
    width: '25%'
  },
  {
    title: '未结束流程数',
    dataIndex: 'midNum',
    align: 'center',
    width: '25%'
  },
  {
    title: '结束流程数',
    dataIndex: 'endNum',
    align: 'center',
    width: '25%'
  },
];
export default {
  name: 'statisticsModal',
  components: {
    processTaskModal,
    approvalTimeModal,
  },
  data() {
    return {
      activeKey: 'depart',
      departSource: [],
      userSource: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        pageSizeOptions: ['10', '20', '30', '50', '100', '200'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
      },
      visible: false,
      departColumns,
      userColumns,
      childColumns_1,
      childColumns_2,
      time: [],
      expandedRowKeys: [],
      innerDepartData: [],
      innerUserData: []
    }
  },
  methods: {
    //导出
    handleExportXls() {
      let url = this.activeKey=='user'?'/api/erpmng/sys/board/exportProcessByUser':'/api/erpmng/sys/departProcessRank/exportProcessByDept'
      let fileName = this.activeKey=='user'?'人员流程统计表':'部门流程统计表'
      let param = {};
      let startTime = `${moment(this.time[0]).format('YYYY-MM')}-01`
      let endTime = `${moment(this.time[1]).endOf('month').format('YYYY-MM-DD')}`
      param.startTime = startTime
      param.endTime = endTime
      console.log('导出参数', param)
      downFile(url, param).then(data => {
        if (!data) {
          this.$message.warning('文件下载失败')
          return
        }
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          window.navigator.msSaveBlob(
            new Blob([data], {
              type: 'application/vnd.ms-excel'
            }),
            fileName + '.xls'
          )
        } else {
          let url = window.URL.createObjectURL(
            new Blob([data], {
              type: 'application/vnd.ms-excel'
            })
          )
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', fileName + '.xls')
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link) // 下载完成移除元素
          window.URL.revokeObjectURL(url) // 释放掉blob对象
        }
      })
    },
    // 点击切换
    callback(val) {
      this.pagination.current = 1
      this.activeKey = val
      this.$nextTick(() => {
        this[`render_${val}`]()
      })
    },
    viewProcessName(record){
      this.$refs.approvalTimeModal.showModal(record,this.activeKey,this.time)
    },
    // 点击查看发起流程数
    onProcess(val){
      let startDate = `${moment(this.time[0]).format('YYYY-MM')}-01`
      let endDate = `${moment(this.time[1]).endOf('month').format('YYYY-MM-DD')}`
      let value = {
        startDate,
        endDate,
        ...val
      }
      this.$refs.processTaskModal.showModal(value)
    },
    handleExpand(expanded, record){
      this.expandedRowKeys=[];
      this.innerDepartData=[];
      this.innerUserData=[];
      if(expanded===true){
        if(this.activeKey == 'user'){
          this.expandedRowKeys.push(record.key);
          this.innerUserData = record.processList
        } else {
          this.expandedRowKeys.push(record.departId);
          this.innerDepartData = record.processInfoVoList
        }
      }
    },
    render_depart(){
      let startTime = `${moment(this.time[0]).format('YYYY-MM')}-01`
      let endTime = `${moment(this.time[1]).endOf('month').format('YYYY-MM-DD')}`
      getAction('/api/erpmng/sys/departProcessRank/departProcessRank',{ startTime, endTime }).then(res => {
        if(res.success){
          this.departSource = res.result || []
        }
      })
    },
    render_user(){
      let startTime = `${moment(this.time[0]).format('YYYY-MM')}-01`
      let endTime = `${moment(this.time[1]).endOf('month').format('YYYY-MM-DD')}`
      getAction('/api/erpmng/sys/board/userRankProcess',{ startTime, endTime }).then(res => {
        if(res.success){
          this.userSource = res.result.map((val,index) => {
            val.key = index
            return val
          }) || []
        }
      })
    },
    showModal(val,time) {
      this.visible = true
      this.dataSource = []
      this.activeKey = val
      this.time = time || []
      this.$nextTick(() => {
        this[`render_${val}`]()
      })
    },
    closeModal() {
      this.visible = false
      this.pagination.current = 1
    },
    tableChange(val) {
      this.pagination = val
    }
  }

}
</script>
<style scoped>
.ant-card-body {
  margin-bottom: 18px;
}

.table-operator button {
  margin-bottom: 18px;
  margin-right: 5px;
}

.anty-row-operator button {
  margin: 0 5px
}

.ant-btn-danger {
  background-color: #ffffff
}

.ant-modal-cust-warp {
  height: 100%
}

.ant-modal-cust-warp .ant-modal-body {
  height: calc(100% - 110px) !important;
  overflow-y: auto
}

.ant-modal-cust-warp .ant-modal-content {
  height: 90% !important;
  overflow-y: hidden
}

.anty-img-wrap {
  height: 25px;
  position: relative;
}

.anty-img-wrap>img {
  max-height: 100%;
}
</style>